<template>
    <view class="header-navbar">
        <up-navbar
            :fixed="fixed"
            :placeholder="true"
            :bg-color="bgColor"
            :safe-area-inset-top="safeAreaInsetTop"
            :border="border"
            :height="navHeight"
        >
            <template #left>
                <view class="h100 align-center">
                    <view class="align-center h100 pl-28" @click="handleBack">
                        <!-- 后面需要替换成自己项目库字体图标 -->
                        <view v-if="isShowBack" class="mr-14">
                            <up-icon
                                :name="iconName"
                                :color="color"
                                :size="iconSize"
                                :bold="true"
                            ></up-icon>
                        </view>
                        <view
                            v-if="title && !titleCenter"
                            :style="[titleStyle]"
                            class="fs-36 t-3 pl-2 line-height1 bold"
                        >
                            <text :style="{ color: color }">{{ title }}</text>
                        </view>
                    </view>
                    <!-- 头部自定义内容插槽 如果标题居中则移除 -->
                    <slot v-if="!titleCenter" name="headLeft"></slot>
                </view>
            </template>
            <template #center>
                <view class="center h100">
                    <slot name="center"></slot>
                    <view :style="[titleStyle]" v-if="title && titleCenter" class="fs-34 t-3">
                        <text class="line-height1 bold" :style="{ color: color }">{{ title }}</text>
                    </view>
                </view>
            </template>
        </up-navbar>
    </view>
</template>

<script setup>
/**
 * @description 自定义头部导航组件。主要是把uview进行一次二次封装，让其符合自己项目的需求。
 * @author yinzhi
 * @date 2025-03-05
 * @param {Boolean} safeAreaInsetTop 是否开启顶部安全区适配 默认值：true
 * @param {Boolean} placeholder 固定在顶部时，是否生成一个等高元素，以防止塌陷 默认值：true
 * @param {Boolean} fixed 导航栏是否固定在顶部 默认值：true
 * @param {Boolean} border 导航栏底部是否显示下边框 默认值：false
 * @param {String} height 导航栏高度(不包括状态栏高度在内)单位px 自己携带单位，防止uview解析问题
 * @param {String | Number} iconSize 左侧图标字体大小，单位默认px 默认值：34rpx
 * @param {String} iconName 左侧图标名称 默认值：nav-left 自定义的字体图标 arrow-left
 * @param {String} color 导航栏图标以及文字颜色 默认值：#333
 * @param {Boolean} isShowBack 是否显示左侧返回图标 默认值：true
 * @param {String} title 左侧标题
 * @param {String} bgColor 背景颜色 默认值：#fff
 * @param {Object} titleStyle 左侧标题样式设置
 * @param {Boolean} titleCenter 标题是否居中显示 默认值：false
 * @param {Boolean} isCustomFun 是否自定义点击事件 默认值：false
 * @param {Function} handleBack 左侧图标与文字点击事件 详细查看下方方法
 * 示例：
 * <hj-navbar  title="首页" />
 */
import { computed } from 'vue'
import { useStore } from 'vuex'
import props from './props.js'

const store = useStore()
const emit = defineEmits()

const {
    safeAreaInsetTop,
    placeholder,
    fixed,
    border,
    height,
    iconSize,
    iconName,
    color,
    isShowBack,
    title,
    bgColor,
    titleStyle,
    titleCenter,
    isCustomFun
} = defineProps(props)

const systemInfo = computed(() => store.state.platform.systemInfo)

const navHeight = computed(() => height || systemInfo.value?.barHeight + 'px')

/**
 * 左侧图标和文字点击事件
 * 默认点击返回上一页，没有上一页返回初始化页面(新项目需自行更改对应的默认跳转页)
 * @param {Boolean} isCustomFun 是否自定义点击事件 默认值：false
 */
const handleBack = () => {
    if (!isShowBack) {
        return
    }
    if (isCustomFun) {
        emit('handleBack')
    } else {
        uni.navigateBack({
            delta: 1,
            fail: err => {
                uni.reLaunch({
                    url: '/pages/index/index'
                })
            }
        })
    }
}
</script>
<style scoped lang="scss">
.header-navbar {
    position: relative;
    z-index: 2000;
}
</style>
